<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点线面</title>
    <link rel="stylesheet" type="text/css" href="../../lib/openLayers/6.5.0/ol.css" >
    <script type="text/javascript" src="../../lib/openLayers/6.5.0/ol.js"></script>
    <script type="text/javascript" src="../../js/OpenLayersUtil.js"></script>
    <style>
        .map {
            height: 900px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map" class="map"></div>
    <div id="mouse-position"></div>
    <script type="text/javascript">
        // 初始化地图，默认使用OSM地图
        var map = OpenLayersUtil.init("map")
        // 添加文字地图
        OpenLayersUtil.addLayer(OpenLayersUtil.layers.天地图文字标注())
        OpenLayersUtil.addMousePosition('mouse-position')

        /***
         创建要素图层的流程很简单，如下所示：
         1.创建样式——new ol.style.Style()
         2.创建要素，设置其样式——new ol.Feature()
         3.创建数据源，添加要素——new ol.source.Vector()
         4.创建要素图层，设置数据源——new ol.layer.Vector()
         5.创建地图，添加要素图层——new ol.Map()
         **/

        // 点
        function point(){
            // 创建样式
            var style = new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 0,
                        fill: new ol.style.Fill({
                            color: '#ab13de'
                        })
                    }),
                    text: new ol.style.Text({
                        text: "点",
                        // text: properties.num,
                        /*fill: new ol.style.Fill({
                          color: '#fff'
                        }),*/
                        // font: "18px",
                        font: "bold 30px normal",
                        textAlign: "center",  // 文本对齐方向，以线的中心点为基准。 'left', 'right', 'center', 'end' or 'start'. Default is 'center'.
                        textBaseline: "middle", // 文本底部对齐方向，以线为基准。 'bottom', 'top', 'middle', 'alphabetic', 'hanging', 'ideographic'.
                        offsetX: 0,
                        offsetY: -12,
                        fill: new ol.style.Fill({
                            color: "#000000"
                        }),
                        stroke: new ol.style.Stroke({color: '#ab13de', width: 2})
                    })
                });
            // 创建要素，设置其样式
            var feature = new ol.Feature({
                geometry: new ol.geom.Point([120, 36])
            });
            feature.setStyle(style);
            // 创建数据源，添加要素
            var source = new ol.source.Vector();
            source.addFeature(feature);
            // 创建要素图层
            var layer = new ol.layer.Vector({
                source: source
            });
            map.addLayer(layer);
        }
        point()

        // 线
        function line(){
            // 创建显示样式
            var style = new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'blue',
                    width: 5
                })
            })

            // 创建要素，设置其样式
            var feature = new ol.Feature({
                geometry: new ol.geom.LineString([
                    [114.8, 29.8],
                    [120.0, 30.0],
                    [120.2, 29.8]
                ])
            });
            feature.setStyle(style);

            // 创建数据源，添加要素
            var source = new ol.source.Vector();
            source.addFeature(feature);

            // 创建要素图层
            var layer = new ol.layer.Vector({
                source: source
            });
            map.addLayer(layer)
        }
        wire()

        // 面
        function noodle(){
            // 创建显示样式
            var style = new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'pink'
                })
            });

            // 创建要素，设置其样式
            var feature = new ol.Feature({
                geometry: new ol.geom.Polygon([[
                    [119.8, 29.8],
                    [120.2, 29.8],
                    [120.0, 30.0],
                    [119.8, 29.8]
                ]])
            });
            feature.setStyle(style);

            // 创建数据源，添加要素
            var source = new ol.source.Vector();
            source.addFeature(feature);

            // 创建要素图层
            var layer = new ol.layer.Vector({
                source: source
            });
            map.addLayer(layer)
        }
        noodle()

        // 圆
        function round(){
            // 创建显示样式
            var style = new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'orange'
                })
            });

            // 创建要素，设置其样式
            var feature = new ol.Feature({
                geometry: new ol.geom.Circle([120.0, 30.0], 0.1)
            });
            feature.setStyle(style);

            // 创建数据源，添加要素
            var source = new ol.source.Vector();
            source.addFeature(feature);

            // 创建要素图层
            var layer = new ol.layer.Vector({
                source: source
            });
            map.addLayer(layer);
        }
        round();

    </script>
</body>
</html>